<template>
  <!-- 骨架屏 -->
  <SkeletonLoading v-if="initLoading" />
  <div class="total-module" v-else>
    <!-- 顶部卡片展示 -->
    <TopTitle style="margin-top: 20px">营收数据汇总</TopTitle>
    <DataStatistics v-if="briefReportlistamount" :briefReportlistamount="briefReportlistamount" />
    <CardDivider />
    <!-- 收益趋势图 -->
    <TopTitle>
      收益趋势图
      <template #extra>
        <div class="flex items-center">
          <a-button class="total-statistical-button" type="outline" @click="openModalExplain('income')"> 统计说明 </a-button>
          <a-select
            v-model="itemNameList"
            :max-tag-count="1"
            style="width: 220px; margin-left: 24px"
            placeholder="全部费项"
            :options="revenueSummary.incomeItemEnums"
            @change="changeItemNameList"
            multiple
          >
            <template #label="{ data }"> {{ ellipsis(data.label) }} </template>
          </a-select>
        </div>
      </template>
    </TopTitle>
    <!-- 筛选的时间为1天或2天时，展示饼图 -->
    <RevenueCharts.PieChart v-if="dayNum < 2" :echartData="incomeEchartData[0]" />
    <RevenueCharts.PieChart v-if="dayNum >= 1 && dayNum < 2" :echartData="incomeEchartData[1]" />
    <RevenueCharts.BarLineChart v-if="dayNum >= 2" :echartData="incomeEchartData" />
    <CardDivider />

    <!-- 门店收益图 -->
    <TopTitle>
      门店收益图
      <template #extra>
        <a-button class="total-statistical-button" type="outline" @click="openModalExplain('store')"> 统计说明 </a-button>
      </template>
    </TopTitle>
    <!-- 筛选的时间为1天或2天时，展示饼图 -->
    <RevenueCharts.PieChart v-if="dayNum < 2" :echartData="siteIncomeEchartData[0]" />
    <RevenueCharts.PieChart v-if="dayNum >= 1 && dayNum < 2" :echartData="siteIncomeEchartData[1]" />
    <StoreCharts.BarLineChart v-if="dayNum >= 2" :echartData="siteIncomeEchartData" />
  </div>
</template>
<script setup>
  import { ref, h } from 'vue'
  import { Modal } from '@arco-design/web-vue'
  import dayjs from 'dayjs'
  import TopTitle from '../components/card/top-title.vue'
  import CardDivider from '../components/card/card-divider.vue'
  import DataStatistics from '../components/DataStatistics.vue'
  import RevenueCharts from '../components/echarts/revenue'
  import StoreCharts from '../components/echarts/store'
  import SkeletonLoading from '../components/skeleton-loading.vue'
  import { briefReportlist, incomeStatistics, siteIncome } from '@/api/dashboard/revenueSummary'
  import { usePageDict } from '@/hooks/useDict'
  const revenueSummary = usePageDict('revenueSummary')
  const emits = defineEmits(['loadDataComplete'])

  // 获取筛选数据
  const dayNum = ref(0)
  const props = defineProps({
    // 更新数据更新时间
    refreshUpdateTime: Function,
  })
  const itemNameList = ref([])
  const incomeEchartData = ref([])
  const siteIncomeEchartData = ref([])
  const briefReportlistamount = ref({})
  // 骨架屏占位，第一次加载后关闭
  const initLoading = ref(true)
  // 接口参数
  const queryParam = ref({})
  const loadData = (params = {}) => {
    // 判断时间是否存在
    if (params.startTime && params.endTime) {
      let { startTime, endTime } = params
      dayNum.value = dayjs(endTime).diff(dayjs(startTime), 'day')
    }
    queryParam.value = {
      siteIdList: params.siteIdList,
      orderTimeQueryType: params.orderTimeQueryType,
      startTime: params.startTime,
      endTime: params.endTime,
      selectDateType: params.selectDateType,
    }
    briefReportlist(queryParam.value).then((res) => {
      briefReportlistamount.value = res.result || {}
      // 更新数据更新时间
      props.refreshUpdateTime(res.result.lastUpdateTime)
      initLoading.value = false

      emits('loadDataComplete')
    })
    siteIncome(queryParam.value).then((res) => {
      siteIncomeEchartData.value = res.result.data || []
    })
    queryItemNameList()
  }
  const queryItemNameList = () => {
    incomeStatistics({ ...queryParam.value, itemNameList: itemNameList.value }).then((res) => {
      incomeEchartData.value = res.result.data || []
    })
  }
  // 统计说明
  const openModalExplain = (type) => {
    // 收益趋势图
    let content = [
      '最多展示90天数据，如有需要可更精准的筛选时间',
      '根据订单的取值时间（取车或还车），统计订单下包含的所有费用以及结算情况，如根据实际还车时间筛选订单，则将订单所有费用统计在实际还车这一天',
    ]
    if (type == 'income') {
      content = content.concat([
        '该图表不包含车辆购置费及购置补充费（购置税、过户费、运输费、保证金、手续费）',
        '此处不展示部门的收益趋势，因为部门当前仅用于运营成本，全部为支出',
      ])
    } else {
      content = content.concat(['此处不展示部门的收益趋势，因为部门当前仅用于运营成本，全部为支出'])
    }

    Modal.info({
      title: '统计说明',
      width: '45vw',
      content: () => {
        return h(
          'div',
          {},
          content.map((item, index) => h('p', {}, `${index + 1}.${item}`))
        )
      },
    })
  }
  // 超过7个字显示点点点
  const ellipsis = (label) => {
    return label.length > 7 ? `${label.slice(0, 7)}...` : label
  }
  const changeItemNameList = () => {
    queryItemNameList()
  }
  defineExpose({
    loadData,
  })
</script>
<style lang="less" scoped>
  .total-module {
    padding-bottom: 30px;
    &-title {
      font-weight: 600;
      font-size: 16px;
      color: #1d2129;
      margin-bottom: 16px;
    }
    &-statistical-button {
      color: #1e1e1e;
      border: 1px solid #c5c6cd;
    }
  }
</style>
